<template>
	<view>
		<view class="pickup-box">
			<view v-for="(item, index) in shopList" :key="index" class="shop">
				<image :src="$util.img(item.picture_info.pic_cover_micro)" mode="aspectFit"></image>
				<view class="shop-detail">
					<view class="title uni-bold">{{ item.goods_name }}</view>
					<view class="price">
						<view>
							<text class="ns-text-color-gray">价格：</text>
							{{ item.price }}
						</view>
						<view>×{{ item.num }}</view>
					</view>
					<view class="num" v-if="item.sku_name">
						<text class="ns-text-color-gray">规格：</text>
						{{ item.sku_name }}
					</view>
				</view>
			</view>
			<view class="order ns-padding">
				<view class="order-item">
					<view class="ns-margin-right ns-text-color-gray">订单状态：</view>
					<view>{{ orderInfo.status_name }}</view>
				</view>
				<view class="order-item">
					<view class="ns-margin-right ns-text-color-gray">提货人：</view>
					<view>{{ orderInfo.receiver_name }}</view>
				</view>
				<view class="order-item">
					<view class="ns-margin-right ns-text-color-gray">联系方式：</view>
					<view>{{ orderInfo.receiver_mobile }}</view>
				</view>
			</view>
		</view>
		<button type="primary" @click="confirmPickUp" class="confirm">确认提货</button>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login" href="pickup_toexamine"></ns-login>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import loadingCover from '@/components/loading/loading.vue';
import nsLogin from 'components/ns-login/ns-login.vue';
export default {
	components: {
		loadingCover,
		nsLogin
	},
	data() {
		return {
			orderId: '',
			shopList: [],
			orderInfo: [],
			flag: false
		};
	},
	onLoad(data) {
		this.orderId = data.order_id;

		// 小程序扫码进入
		if (data.scene) {
			let sceneParams = data.scene.split('-');
			this.orderId = sceneParams[1];
		}
	},
	onShow() {
		var isLogin = false;
		// #ifdef H5
		getApp().checkLogin(() => {
			isLogin = true;
			setTimeout(() => {
				this.$refs.login.clickLogin();
			}, 100);
		});
		// #endif
		// #ifdef MP
		getApp().$vm.checkLogin(() => {
			isLogin = true;
			this.$refs.login.clickLogin();
		});
		// #endif

		if (isLogin) return;

		this.getInfo();
	},
	mixins: [http],
	methods: {
		getInfo() {
			this.sendRequest({
				url: 'System.Order.getPickupOrderInfo',
				data: {
					order_id: this.orderId
				},
				success: res => {
					if (res.code == 0) {
						this.shopList = res.data.order_goods;
						this.orderInfo = res.data;
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
					} else {
						this.$util.showToast({
							title: res.message,
							success: res => {
								setTimeout(() => {
									this.$util.redirectTo('/pages/member/index/index', {}, 'tabbar');
								}, 1500);
							}
						});
					}
				}
			});
		},
		confirmPickUp: function() {
			if (this.flag) return;
			this.flag = true;
			this.sendRequest({
				url: 'System.Order.confirmPickup',
				data: {
					order_id: this.orderId,
					buyer_name: this.orderInfo.receiver_name,
					buyer_phone: this.orderInfo.receiver_mobile
				},
				success: res => {
					if (res.code > 0) {
						this.$util.showToast({ title: res.message });
						setTimeout(() => {
							this.$util.redirectTo('/pages/member/index/index', {}, 'tabbar');
						}, 1500);
					} else {
						this.$util.showToast({ title: res.message });
						this.flag = false;
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	padding: 30rpx;
	box-sizing: border-box;
	.shop {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 2rpx solid #f5f5f5;
		image {
			width: 200rpx;
			height: 200rpx;
		}
		.shop-detail {
			width: 410rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				line-height: 1.5;
			}
			.price {
				display: flex;
				justify-content: space-between;
			}
		}
	}
	.order {
		.order-item {
			display: flex;
		}
	}
}
.pickup-box {
	background-color: #fff;
	border-radius: 20rpx;
}
.confirm {
	position: fixed;
	bottom: 80rpx;
	left: 60rpx;
	right: 60rpx;
	color: #fff;
}
</style>
